<template>
    <div style="display: flex;flex-direction: row;position: relative;width: 375px;height: 40px;"
      :style="{
        'background': nodeModel.configDict.componentStyle.background,
        'marginTop': nodeModel.configDict.componentStyle.marginTop/2+'px',
        'marginBottom': nodeModel.configDict.componentStyle.marginBottom/2+'px',
        'marginLeft': nodeModel.configDict.componentStyle.marginLeft/2+'px',
        'marginRight': nodeModel.configDict.componentStyle.marginRight/2+'px',
      }">
      <!-- 左侧按钮 -->
      <div style="display: flex;align-items: center;justify-content: center;margin-left: 10px;" v-if="nodeModel.configDict.componentStyle.isShowForBtn1">
        <el-image :src="nodeModel.configDict.coverUrl" style="width: 20px;height: 20px;"></el-image>
      </div>
      <!-- 标题 -->
      <div style="width: 335px;height: 40px;line-height: 40px;text-align: center;"
      v-if="nodeModel.configDict.componentStyle.isShowForText1 && nodeModel.configDict.componentStyle.titleForText1" 
      :style="{
        'color': nodeModel.configDict.componentStyle.colorForText1,
        'font-size': nodeModel.configDict.componentStyle.fontsizeForText1/2 + 'px',
        'font-weight': nodeModel.configDict.componentStyle.fontweightForText1,
      }">{{ nodeModel.configDict.componentStyle.titleForText1 }}</div>
      <!-- 右侧占位 -->
      <div style="width: 40px;height: 40px;line-height: 40px;text-align: center;"
      ></div>
    </div>
</template>
<script>
  export default {
    components: {
        
    },
    props:{
      nodeModel:{
        type: Object,
        default: res=>{}
      },
    },
    data() {
      return {
        
      }
    },
    methods:{
        
    }
  }
</script>

<style lang="scss" scoped>

</style>